<template>
    <div style="height: 100%">
        <el-container class="member-grade-page">
            <div class="content-header">
                <el-row type="flex" class="row-bg" justify="space-between" style="padding: 10px 10px">
                    <el-col :span="6" class="header-title">在线列表</el-col>
                    <el-col :span="6">
<!--                        <div style="text-align: right">-->
<!--                            <el-button-group>-->
<!--                                <el-button type="primary" plain size="mini" icon="el-icon-circle-plus-outline"-->
<!--                                           @click="dialogShow=true">新增用户-->
<!--                                </el-button>-->
<!--                            </el-button-group>-->
<!--                        </div>-->
                    </el-col>
                </el-row>
            </div>
            <el-main>
                <el-table stripe ref="grade_table" border :data="dataList" height="100%" v-loading="loading">
                    <el-table-column prop="client" label="设备编号" width="150"/>
                    <el-table-column prop="remark.username" label="用户名" width="150"/>
                    <el-table-column prop="type" label="类型" width="50"/>
                    <el-table-column prop="protocol" label="协议" width="80"/>
                    <el-table-column prop="pv" label="版本" width="50" />
                    <el-table-column prop="peername" label="Peername" width="120" />
                    <el-table-column prop="listener" label="监听"  width="120"/>
                    <el-table-column  label="接收/发送" >
                        <template slot-scope="props">
                            in: {{props.row.stat.recv_oct|formatSize}}/ out: {{props.row.stat.send_oct|formatSize}}
                        </template>
                    </el-table-column>

                    <el-table-column prop="created_at" label="上线时间" width="150">
                        <template slot-scope="props">
                            {{props.row.created_at|secondToDate}}
                        </template>

                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
<!--                            <el-link-->
<!--                                    size="mini" plain-->
<!--                                    type="primary"-->
<!--                                    icon="el-icon-edit"-->
<!--                                    :underline="false"-->
<!--                                    style="margin-right: 5px;font-size: 11px"-->
<!--                                    @click="debug(scope.row)">调试-->
<!--                            </el-link>-->

                            <el-link
                                    size="mini" plain
                                    type="primary"
                                    icon="el-icon-remove"
                                    :underline="false"
                                    style="margin-right: 5px;font-size: 11px;color: darkred"
                                    @click="disconnectDialog(scope.row)">断开
                            </el-link>

                            <el-link
                                    size="mini" plain
                                    type="primary"
                                    icon="el-icon-message"
                                    :underline="false"
                                    style="margin-right: 5px;font-size: 11px;color: #42b983"
                                    @click="push_dialog(scope.row)">发送
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer class="content-table-pagination">
                <el-pagination
                        background
                        :current-page="pagination.current_page"
                        layout="total,prev, pager, next"
                        @current-change="getData"
                        :page-size="pagination.page_size"
                        :total="pagination.totalCount">
                </el-pagination>
            </el-footer>
        </el-container>
        <el-dialog
                title="消息推送"
                center
                :visible.sync="dialogShow"
                width="30%">

            <el-form label-position="right" :model="message"  :label-width="label_width">
                <el-form-item  label="设备" required prop="topic"  size="small">
                    <el-input
                            :disabled="true"
                            auto-complete="new-password"
                            v-model="message.client"/>
                </el-form-item>

                <el-form-item  label="消息" prop="name"  size="small">
                    <el-select
                            auto-complete="new-password"
                            placeholder="请选择指令"
                            v-model="message.command">
                        <el-option
                                v-for="(item,index) in cmdList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                        </el-option>

                    </el-select>
                </el-form-item>

                <el-form-item  label="应用" prop="topic"  size="small">
                    <el-select
                            auto-complete="new-password"
                            placeholder="请选择应用"
                            v-model="message.appid">
                        <el-option
                        v-for="(item,index) in appList"
                        :key="index"
                        :label="item.app_name"
                        :value="item.app_key">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item size="small" label="Qos:">
                    <el-select
                            auto-complete="new-password"
                            placeholder="请选择消息质量"
                            v-model="message.qos">
                        <el-option
                                v-for="(item,index) in qosList"
                                :key="index"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item size="small" label="Retain:">
                    <el-select v-model="message.retain">
                        <el-option label="保留消息" :value="1"/>
                        <el-option label="非保留消息" :value="0"/>
                    </el-select>
                </el-form-item>
                <el-form-item size="small" >
                    <el-button  size="small" style="width: 50%" type="primary" @click="push">保 存</el-button>
                </el-form-item>
            </el-form>

            <template slot="footer" class="dialog-footer">

            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {disconnect, get_app, get_command, get_session, push} from "../api/himq_http";
    import {formatTime} from "../comm/date_utils";
    import {bytesToSize} from "../comm/utils";

    export default {
        name: "AdminSession",
        data() {

            return {
                dataList: [],
                appList:[],
                cmdList:[],
                loading: false,
                dialogShow: false,
                label_width: "80px",
                pagination: {
                    totalCount: 0,
                    current_page: 1,
                    page_size:20,
                },
                message:{
                    appid:'',
                    command:'',
                    client:'',
                    qos:0,
                    retain:0
                },
                qosList:[
                    {value:0, label:'qos0'},
                    {value:1, label:'qos1'},
                    {value:2, label:'qos2'},
                    ]
            }
        },
        created() {
            this.getApp();
            this.getCmd();
            this.getData(1)
        },
        filters:{
            secondToDate(s){
                return formatTime(s*1000,"Y-M-D h:m:s")
            },
            formatSize(bytes){
                return bytesToSize(bytes);
            }
        },
        computed:{
            apps:function () {
                let arr = [];
                this.appList.forEach(function () {

                });
                return arr;
            }
        },

        methods: {
            getData(page=1) {
                console.log(page)
                this.loading = true;
                let that = this;
                get_session({page:page,page_size:20}).then(
                    resp => {
                        that.loading = false;
                        that.dataList = resp.data.items;
                        that.dataList.forEach(function (item) {
                            let stat_json = JSON.parse(item.stat);
                            that.$set(item,'stat',stat_json)
                        })
                        that.pagination.totalCount = resp.data.count;

                    }, err => {
                        that.loading = false;
                        console.log(err.message)
                    }
                )
            },
            push_dialog(row){
                this.dialogShow = true;
                this.message.client = row.client;
            },


            push(){
                let that = this;
                this.dialogShow =false;
                push(this.message,this.message.appid).then(
                    resp => {
                        console.log(resp)
                        that.$toast({message:resp.data.message,type:"success"})
                    }, err => {
                        that.$toast({message: err.data.message,type:"warning"})
                        console.log(err.message)
                    }
                )
            },
            disconnectDialog(row){
                console.log(row);
                let that = this;
                this.$confirm('确定要断开此会话吗?', '断开连接', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    disconnect({client: row.client}).then(
                        resp => {
                            that.$toast({message: resp.message, type: 'success'})
                            setTimeout(function () {
                                that.getData();
                            },3000)
                        },
                        error => {
                            that.$toast({message: error.message, type: 'error'})
                        }
                    )
                })

            },

            getCmd() {
                this.loading = true;
                let that = this;
                get_command({page:1,page_size:100}).then(
                    resp => {
                        that.loading = false;
                        that.cmdList = resp.data.items;
                    }, err => {
                        that.loading = false;
                        console.log(err.message)
                    }
                )
            },

            getApp() {
                let that = this;
                get_app({page:1,page_size:50}).then(
                    resp => {
                        that.appList = resp.data.items;
                    }, err => {
                        console.log(err.message)
                    }
                )
            },
        }
    }
</script>

<style scoped>

</style>